import { GeometryShape, Pointer, GeometryItem } from '@/graph/3d/config/shapes'
import { defineStore } from 'pinia'
import * as THREE from 'three'
import { useSceneStore } from './scene'
import { PointerGenerator } from '@/views/3d/hooks/usePointer'

export interface UpdateElementData {
  id: string | string[]
  props: Partial<Pointer>
}

export interface EditorState {
  isCreating: boolean // 是否正在创建
  isEditing: boolean // 是否正在编辑
  creatingShape: GeometryItem | null // 正在创建的图形
  creatingStep: number // 创建的步骤数
  handleElementId: string // 正在编辑的元素id
  handleElement: GeometryShape | null
  pointers: Pointer[]
  mouseVector: VerticesType // 鼠标位置（基于网格面板）
  shapes: GeometryShape[] // 所有的图形
}

export const use3DEditorStore = defineStore('editor-3d', {
  state: (): EditorState => ({
    isCreating: false,
    isEditing: false,
    creatingShape: null,
    creatingStep: 0,
    handleElementId: '',
    handleElement: null,
    pointers: [
      // new PointerGenerator({ position: [0, 0, 5] }),
      // new PointerGenerator({ position: [5, 2, 3] }),
      // new PointerGenerator({ position: [2, 2, 3] }),
      // new PointerGenerator({ position: [1, 5, 3] }),
    ],
    mouseVector: [0, 0, 0],
    shapes: [],
  }),
  getters: {
    hoveredPointer(state) {
      return state.pointers.find((item) => item.hovered)
    },
  },
  actions: {
    setCreating(state: boolean) {
      this.isCreating = state
    },
    setEditing(state: boolean) {
      this.isEditing = state
    },
    setCreatingShape(state: GeometryShape | null) {
      this.creatingShape = state
    },
    setCreatingStep(state: number) {
      this.creatingStep = state
    },
    setShapes(state: GeometryShape[]) {
      this.shapes = state
    },
    createShape(shape: GeometryItem) {
      this.creatingShape = shape
      this.creatingStep = 0
      this.isCreating = true
    },
    addShape(shape: Partial<GeometryShape> | Partial<GeometryShape>[]) {
      const shapes = Array.isArray(shape) ? shape : [shape]
      this.shapes.push(...shapes)

      this.creatingStep = 0
    },
    removeShape(state: string | string[]) {
      const ids = Array.isArray(state) ? state : [state]
      this.shapes = this.shapes.filter((item) => !ids.includes(item.id))
    },
    updateShape(data: Partial<GeometryShape>[]) {
      const elIdList = data.map((item) => item.id)
      this.shapes = this.shapes.map((item) => {
        if (elIdList.includes(item.id)) {
          const props = data.find((v) => v.id === item.id)
          if (props) {
            return { ...item, ...props }
          }
        }

        return item
      })
    },
    // 取消创建
    cancelCreate() {
      this.creatingShape = null
      this.creatingStep = 0
      this.isCreating = false
    },
    setHandleElement(state: GeometryShape | null) {
      this.handleElement = state
    },
    addPointer(pointer: Pointer | Pointer[]) {
      const pointers = Array.isArray(pointer) ? pointer : [pointer]
      this.pointers.push(...pointers)
    },
    removePointer(state: string | string[]) {
      const ids = Array.isArray(state) ? state : [state]
      this.pointers = this.pointers.filter((item) => !ids.includes(item.id))
    },
    updatePointer(data: UpdateElementData) {
      const { id, props } = data
      const elIdList = typeof id === 'string' ? [id] : id
      this.pointers = this.pointers.map((item) => {
        if (elIdList.includes(item.id)) {
          return { ...item, ...props }
        }
        return item
      })
    },
    updatePointers(data: Pointer[]) {
      this.pointers = data.map((v) => ({ ...v }))
    },
    updateMouseVector(vector: VerticesType) {
      this.mouseVector = vector
    },
  },
})
